<!--
 * Date: 2018年01月06日 17:36:45
 * LastEditors: lvyou
 * LastEditTime: 2019年12月11日 17:27:56
 * FilePath: \youlinweb-master\src\components\comment-detail-body.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div>
    <table class="commentdetail-body">
      <tr>
        <div v-if="commenttype==null" class="commentdetail-text" @click="reply($event,topicindex,commentindex,tabId)" :class="{indextopicfontsize:indextopicfont}">
          <span v-if="circlename" style="color:#FB685B;" @click="goCircleDetail(circleid)">#{{circlename}}#</span>
          <span class="detailcom" v-if="commenttext&&commenttext.indexOf('://?')==-1&&commenttext.indexOf('?//:')==-1" v-html="commenttext">{{commenttext}}</span>
          <span class="detailcom" v-else-if="commenttext&&commenttext.indexOf('?//:')>-1" >{{commenttext.split("?//:")[0]}} <span class="statistics-url" @click.stop="$router.push({path:'statistics'})">查看你的2019成绩单</span> </span>
          <span class="detailcom" v-else-if="lanxicontent"> {{lanxicontent.lanxitext}}<a @click.stop="golanxi(lanxicontent.lanxiurl)" >{{lanxicontent.lanxiurltext}}</a></span>
          <!-- <span class="detailcom" v-else>{{commenttext}}</span> -->
        </div>
        <div v-else-if="commenttype!=null" class="commentdetail-text" @click="reply($event,topicindex,commentindex,tabId)" :class="{indextopicfontsize:indextopicfont}">
          <span class="detailcom" >回复
            <span style="color: #fb685b;"> @ {{atname}} </span>: </span>
            <span class="detailcom" v-html="commenttext"></span>
        </div>
        <td>
          <div v-if="piclength>1" class="commenturl clearfix" :style="{noborderradius:{isborderradius}}">
            <img v-for="(item,index) in picarray" v-lazy.container ="item.src"  class="previewer-demo-img preview-img-item commentimg img-list"   :key="index" @click="golanxi(item.src);saveimgtolocal(picarray,index,isIndextopic,isIndexsay)">
          </div>

          <div v-if="picarray!=null&&picarray[0]!=null&&piclength==1" class="onecommenturl" :style="{noborderradius:isborderradius}">
            <img v-for="(item,index) in picarray" v-lazy.container ="item.src"   class="previewer-demo-img preview-img-item onecommentimg " width="3.58rem" height="2.77rem" :key="index"  @click="golanxi(item.src);saveimgtolocal(picarray,index,isIndextopic,isIndexsay)">

          </div>
          <!--<mt-popup
            :position="none"
            :lockScroll="true"
            v-model="popupVisible"
            popup-transition="popup-fade"
            :modal="true"
          >
            <img :src="popImg" style="width:100%;">
          </mt-popup>-->
        </td>

        <div v-if="isdisplacetype==2" class="displace-explain">
          {{description}}
        </div>
        <div v-if="isdisplacetype==3&&replyList.length!=0" class="topic_discuss_top" @click="gocommentdetail(commentindex)">
          <div   v-for="(items,j) in replyList" :key="j">
            <div class="topic_discuss">
              <span class="topic_discuss_name">{{items.nickName}}：</span>
              <span > <span v-if="items.atName!=null" style="color: #fb685b;"> @ {{items.atName}} </span>{{items.content}}</span>
              <div class="check_img_top topic_discuss_name" >
                <div style="display:table">
                    <div class="yl-look check_img" v-if="items.picUrls.length>0"  @click.stop="selectimg(items.picUrls,j)" style="padding-bottom:0.1rem" > </div>
                    <div  v-if="items.picUrls.length>0"  @click.stop="selectimg(items.picUrls,0)" class="check_img" style="padding-bottom:0.05rem">查看图片</div>
                </div>
              </div>
            </div>
          </div>
          <p class="topic_discuss_num" v-if="topiccommentnum>0">
            <span >共{{topiccommentnum}}条回复</span>
            <span class="yl-2list-r" style="padding-bottom:0.035rem"></span>
          </p>
        </div>
      </tr>
    </table>
    <div class="body-sep"></div>
   
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex"
// import { Popup } from 'mint-ui';
export default {
  data() {
    return {
      showImg: false,
      imgShow: false,
      comment: '',
      beforeOrientImg: [],
      imgstr:[],//点击跳转幸福绿城app
      outerlink:"我要报名",
      popupVisible:false,
      popImg:'',
      none:'none'
    }
  },
  computed: {
    ...mapState([
      'isShow'
    ])
  },
  props: ['typename','circleid','circlename','isborderradius','commenttext', 'piclength', 'imgurl', 'picarray', 'isdisplacetype', 'commenttype', 'commentindex', 'topicindex', 'atname', 'description', 'i', 'tabId',"indextopicfont","isIndextopic","isIndexsay","lanxicontent","replyList","topiccommentnum"],
  //isdisplacetype:0评论详情页，2闲置列表页，3话题详情页
  mounted(){
    this.replytextlimit();
  },
  methods: {
    ...mapMutations([
      'changeShow'
    ]),
    doThis(){
      alert("dothis");
    },
    // 圈子详情页
    goCircleDetail(id){
      this.$router.push({path:'discoveryDetails',query:{id:id}})
    },
    reply(event, topicindex, commentindex, tabId) {
      this.$emit("replycomment", { event: event, topicindex: topicindex, commentindex: commentindex, tabId: tabId })
    },
    saveimgtolocal(imgarray,index,isIndextopic,isIndexsay){
      //记录首页话题点击
     if(isIndextopic){
       this.$emit("indextopicclick",isIndextopic);
     };
      //记录首页说说点击
     if(isIndexsay){
       this.$emit("indexsayclick",isIndextopic);
     };
     this.selectimg(imgarray,index);
    },
    golanxi(data){
     
      // window.location.href=data;

     /* console.log(this.typename,'discovery')
      if(this.typename == 'discovery'){
        this.$parent.changeShow(data);
      }else if(this.typename == 'shuoshuo'){
        this.$parent.$parent.changeShow(data);

      }else if(this.typename == 'index'){
        this.$parent.changeShow(data);

      }

      this.$emit('popimg',data)*/
      // console.log(this.$parent,'$parent')

      /*let self = this;
      let loadmore = document.getElementsByClassName("loadmore-ul");
      let loadmorenone = document.getElementsByClassName("loadmore-ul none");

      if(this.popupVisible){
        console.log(loadmorenone,2)

        if (loadmorenone.length > 0) {
          setTimeout(() => {
            loadmorenone[0].className = "loadmore-ul";
          }, 0);
          self.popupVisible = false;
        }
      }else{
        console.log(loadmore,'1')

        if (loadmore.length > 0) {
          setTimeout(() => {
            loadmore[0].className = 'loadmore-ul none';
          }, 0);
          self.popupVisible = true;

        }

      }
      this.popImg = data;*/
    },
    selectimg(imgarray,index){
      this.imgstr=[];
      _each(imgarray,(v,i)=>{
        this.imgstr.push(v.src);
      })
       this.$emit('showImg',this.imgstr,index)
      //window.location.href= "image://?url=" + this.imgstr + "&currentIndex=" + index;
    },
    gocommentdetail(commentindex){
      this.$emit("commentsvgg",{commentindex:commentindex});
    },
    replytextlimit(){
      _each(this.replyList,(m,a)=>{
        if(m.content&&m.content.length>30){
          m.content=m.content.substring(0,30)+"...";
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

p{
  margin: 0;
}
.commentdetail-body {
  display: flex;
  flex-direction: column;
  padding: 0 0rem 0.2rem 0.27rem;
  background: #ffffff
}

.commentdetail-text {
  padding-top: 0.12rem;
  padding-bottom: 0.08rem;
  font-size: 0.3rem;
  color: #494949;
  line-height: 0.45rem;
  width: 6.9rem;
  word-wrap: break-word;
  text-align: left;
}
.indextopicfontsize{
  font-size: 0.28rem;
}
.commenturl {
  margin-top: -0.03rem;
}

.commentimg {
  width: 2.2rem;
  height: 1.7rem;
  display: inline-block;
  margin-right: 0.2rem;
  background-color: #ccc;
}

.onecommenturl {
  margin-top: 0rem;
  width: 3.58rem;
  height:2.77rem;
}

.onecommentimg {
  width: 3.58rem;
  height:2.77rem;
  margin-bottom: 0.05rem;
  border-radius:5px
}

td {
  padding: 0;
  margin: 0;
}

.displace-explain {
  font-size: 0.26rem;
  color: #666666;
  font-family: "PingFangSC Regular";
  line-height: 0.42rem;
  width: 6.9rem;
  word-wrap: break-word;
  text-align: left;
}
.none{
  transform: none !important;
}
.body-sep {
  height: 1px;
  background-color: #E6E6E6;
}

.img-list {
  width: 2.2rem;
  height: 1.7rem;
  float: left;
  margin-right: .15rem;
  margin-top: .1rem;
  border-radius: 3px
}
.noborderradius{
  border-radius: 0px
}
.topic_discuss_fa{
  display: flex;
  flex-direction: row;
  line-height: 0.45rem;
  align-items: center;
}
.topic_discuss_top{
  margin: 0.1rem 0.3rem 0 0;
  padding-left: 0.2rem;
  font-size: 0.28rem;
  color: #666666;
  line-height: 0.42rem;
  border-left: 2px solid #F0F0F0;
}
.topic_discuss_name{
  color: #4093d6
}
.topic_discuss{
   overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* -webkit-box-orient: vertical; */
}
.topic_discuss_num{
  display: flex;
  align-items: center;
  height: 0.4rem;
  margin: 0;
  font-size: 0.28rem;
  color: #4093d6
}
.topic_discuss_icon{
  padding-left: 0.05rem;
}
.check_img_top{
  display: inline-block;
  height: 0.3rem;
}
.check_img{
  display: table-cell;
  vertical-align: middle;
}
.check_img_text{
   display: table-cell;
    vertical-align: middle;
}
.statistics-url{
  color: #4093d6
}
  .mint-popup{
    width: 80% !important;
  }
</style>
